<template>
	<div>
		<div class="news_lie">
			<div class="pb_hader">
				<p>
					<span class="lt_span">{{contacttname}}</span>
					<a class="rg_a"><span>首页</span>&nbsp;&nbsp;/&nbsp;&nbsp;<span>案例展示</span>&nbsp;&nbsp;/&nbsp;&nbsp;<span class="rg_sp">{{contacttname}}</span></a>
				</p>
			</div>
			<div class="about" style="border: 1px solid #EEEEEE; border-top:none;">
				<div class="baidu">
					<img src="../../assets/images/baidu_img.png" />
				</div>

				<div class="lx_lofo_div">
					<div class="lx_left">
						<img src="../../assets/images/lfoog.png" />
						<span class="lfoo_span1">重庆市苏福节能科技有限公司</span>
						<span class="lfoo_span2">Chongqing Su Fu energy-saving technology co., LTD</span>
					</div>
					<div class="lx_right">
						<span>公司电话：<a>0832-68402255</a></span>
						<span>公司邮箱：<a>info@techgong.com</a></span>
						<span>公司网站：<a>www.7150531.czvv.com</a></span>
						<span>公司地址：<a>重庆市九龙坡杨家坪前进支路1号18-8#</a></span>
					</div>
				</div>
			</div>
			<div class="about_1"></div>
			<div class="about" style="border: 1px solid #EEEEEE;">
				<div class="message">
					<div class="mess_left">
						<span class="messf_span1">在线留言</span>
						<span class="messf_span2">Online message</span>
					</div>
					<ul class="mess_right">
						<li><span>名称：</span><input type="text" /></li>
						<li><span>内容：</span><textarea></textarea></li>
						<button type="submit">发表留言</button>
					</ul>

				</div>

			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				contacttname: '联系我们',

			}
		},
		mounted() {
			this.contacttid = this.$route.params.id
		},
		methods: {
			// 监听psgesize 改变
			handleSizeChange(newsize) {
				// console.log(newsize);
				this.querytInfo.pagesize = newsize
			},
			// 监听 页码值 改变
			handleCurrentChange(newpage) {
				// console.log(newpage);
				this.querytInfo.pagenum = newpage
			},
		},
		// 监听路由变化，操作数据更新
		watch: {
			$route(to, from) {
				this.contacttid = this.$route.params.id
				// this.$HTTP.get('', {
				// 	params: ''
				// })
				// .then((res) => {
				// 	// this.newslist = res
				// 	// this.total = res.total
				// })
				// .catch((error) => {
				// 	console.log(error)
				// })
			}
		}
	}
</script>

<style scoped>
	.news_lie {
		width: 100%;
		height: auto;
		float: left;
		box-sizing: border-box;
	}

	.pb_hader {
		width: 100%;
		height: auto;
		padding: 0 20px;
		box-sizing: border-box;
		background: #fff;
		border:1px solid #eee;
		border-bottom: none;
	}

	.pb_hader p {
		width: 100%;
		height: 50px;
		border-bottom: 1px solid #e5e5e5;
		line-height: 50px;
	}

	.pb_hader p .lt_span {
		border-left: 4px solid #0069b1;
		font-size: 18px;
		line-height: 30px;
		margin-top: 10px;
		padding: 0 12px;
		color: #1f2f3a;
	}

	.pb_hader p .rg_a {
		display: inline-block;
		float: right;
		font-size: 14px;
		color: #b3b2b2;
		margin-left: 5px;
	}

	.pb_hader p .rg_a .rg_sp {
		color: #7c7c7c;
	}

	.pb_center {
		width: 100%;
		height: auto;
	}

	.about {
	    width: 100%;
	    height: auto;
	    padding: 0 20px 20px 20px;
	    box-sizing: border-box;
	    float: left;
	    background: #fff;
	}
	.news_lie .about_1 {
	    width: 100%;
	    height: 20px;
	    background: #f7f7f7;
	    float: left;
	}
	.baidu {
	    width: 100%;
	    height: 288px;
	    border: 1px solid #e5e5e5;
	    box-sizing: border-box;
	    margin: 20px 0;
	}
	.baidu img {
	    width: 100%;
	    height: 100%;
	}
	.lx_lofo_div {
	    width: 100%;
	    height: auto;
	    float: left;
	}
	.lx_left {
	    width: 50%;
	    height: 100px;
	    float: left;
	    border-right: 1px dashed #E5E5E5;
	    box-sizing: border-box;
	}
	.lx_left img {
	    margin-top: 27px;
	    float: left;
	}
	.lx_left span.lfoo_span1 {
	    font-size: 18px;
	    color: #221815;
	    line-height: 28px;
	    margin-top: 25px;
	}
	.lx_left span.lfoo_span2 {
	    line-height: 28px;
	    font-size: 12px;
	    color: #888888;
	}
	.lx_right {
	    width: 50%;
	    height: auto;
	    float: left;
	}
	.lx_right span {
	    display: inline-block;
	    width: 100%;
	    text-indent: 40px;
	    font-size: 14px;
	    color: #8b8b8b;
	    line-height: 25px;
	}
	.message {
	    width: 100%;
	    height: auto;
	    float: left;
	    margin-top: 30px;
	}
	.mess_left {
	    width: 26%;
	    height: 140px;
	    box-sizing: border-box;
	    border-right: 1px dashed #E5E5E5;
	    float: left;
	}
	.mess_left span.messf_span1 {
	    font-size: 18px;
	    color: #393939;
	    line-height: 24px;
	    margin-top: 45px;
	}
	.mess_left span.messf_span2 {
	    font-size: 14px;
	    color: #747474;
	    line-height: 24px;
	}
	.mess_right {
	    width: 74%;
	    height: auto;
	    float: left;
	}
	.mess_right li {
	    float: left;
	    margin-top: 12px;
	}
	.mess_right li:first-child {
	    margin-top: 0;
	}
	.mess_right li span {
	    width: 110px;
	    font-size: 14px;
	    color: #6c6b6b;
	    display: inline-block;
	    text-align: right;
	    float: left;
	}
	.mess_right li input {
	    width: 400px;
	    height: 30px;
	    box-sizing: border-box;
	    border: 1px solid #E5E5E5;
	    border-radius: 3px;
	}
	.mess_right li textarea {
	    width: 400px;
	    height: 100px;
	    box-sizing: border-box;
	    border: 1px solid #E5E5E5;
	    border-radius: 3px;
	}
	.mess_right button {
	    width: 100px;
	    height: 35px;
	    border-radius: 3px;
	    background-color: #0069b1;
	    font-size: 14px;
	    color: #fff;
	    border: none;
	    float: right;
	    margin-top: 77px;
	}

	.el-pagination {
		width: 100%;
		margin-top: 20px;
		text-align: center;
		float: left;
	}
</style>
